<template>
  <Row justify="center" class="wrap">
    <Col :xs="24" :sm="20" :md="12" :lg="8">
      <Card class="ivu-mt-16">
        <h3 class="ivu-text-center ivu-mb-16">{{ title }}</h3>
        <Form
          :model="params"
          :label-width="100"
          ref="formItem"
          :rules="createRules"
        >
          <FormItem label="项目" prop="project_id">
            <Select
              v-model="params.project_id"
              @on-change="changePro"
              placeholder="请选择项目"
            >
              <Option
                :value="+item.value"
                v-for="item in projectList"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="部门唯一标识" prop="name">
            <Input v-model="params.department_card" :disabled="true" />
          </FormItem>
          <FormItem label="录入人" prop="user_real_name">
            <Input v-model="params.user_real_name" :disabled="true" />
          </FormItem>
          <FormItem label="一级渠道" prop="channel_id">
            <Select
              v-model="params.channel_id"
              @on-change="changeChannel"
              placeholder="请选择一级渠道"
            >
              <Option
                :value="+item.value"
                v-for="item in channelList"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="二级渠道" prop="second_channel_id">
            <Select
              v-model="params.second_channel_id"
              placeholder="请选择二级渠道"
            >
              <Option
                :value="+item.value"
                v-for="item in scedChannelList"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem
            v-for="item in paramsList"
            :key="item.key_name"
            :label="item.name"
            :prop="`${item.key_name}`"
          >
            <Input
              v-if="item.type == 1 || item.type == 5"
              :type="item.type == 5 ? 'textarea' : 'text'"
              :rows="4"
              v-model="params[item.key_name]"
              :placeholder="`请输入${item.name}`"
            />
            <InputNumber
              v-if="item.type == 2"
              v-model="params[item.key_name]"
              :min="0"
              :placeholder="`请输入${item.name}`"
              style="width:100%"
            />
            <Select
              v-if="item.type == 3 || item.type == 4"
              v-model="params[item.key_name]"
              :multiple="item.type == 4"
              :placeholder="`请选择${item.name}`"
            >
              <Option
                v-for="el in item.condition"
                :value="el.value.toString()"
                :key="el.value"
                >{{ el.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Button
              class="ivu-ml-16"
              :loading="btnLoading"
              type="primary"
              @click="handleSave()"
              >提交</Button
            >
          </FormItem>
        </Form>
      </Card>
    </Col>
  </Row>
</template>
<script>
import { formInfo, fromYuyue } from "@/api/clueform/index.js";
import { mapState } from "vuex";
export default {
  name: "clueform",
  data() {
    return {
      title: "",
      btnLoading: false,
      paramsList: [],
      channelList: [],
      projectList: [],
      departmentList: [],
      scedChannelList: [],
      departmentProject: [],
      params: {
        project_id: "",
        channel_id: "",
        second_channel_id: "",
        department_card: "",
        user_real_name: "",
      },
      createRules: {
        project_id: [
          {
            required: true,
            type: "number",
            message: "请选择项目",
            trigger: "change",
          },
        ],
        channel_id: [
          {
            required: true,
            type: "number",
            message: "请选择一级渠道",
            trigger: "change",
          },
        ],
        second_channel_id: [
          {
            required: true,
            type: "number",
            message: "请选择二级渠道",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("admin/user", ["info"]),
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.params = {
        project_id: "",
        channel_id: "",
        second_channel_id: "",
        department_card: "",
        user_real_name: "",
      };
      this.$refs.formItem.resetFields();
      let params = this.$route.query;
      formInfo({ encrypt_str: params.formId }).then((res) => {
        this.title = res.name;
        res.param_list.forEach((item) => {
          this.$set(this.params, item.key_name, null);
          if (item.key_name == "mobile") {
            this.createRules[item.key_name] = [
              {
                required: item.is_require ? true : false,
                type: "string",
                message: "请输入正确的" + item.name,
                pattern: /^1\d{9,10}$/,
                trigger: "blur",
              },
            ];
          } else {
            this.createRules[item.key_name] = [
              {
                required: item.is_require ? true : false,
                type:
                  item.type == 4
                    ? "array"
                    : item.type == 2
                    ? "number"
                    : "string",
                message:
                  item.type == 1 || item.type == 2 || item.type == 5
                    ? "请输入" + item.name
                    : "请选择" + item.name,
                trigger: "change,blur",
              },
            ];
          }
        });
        this.paramsList = res.param_list;
        this.channelList = res.condition.channel;
        this.projectList = res.condition.project;
        this.departmentProject = res.department_project;
        this.$refs.formItem.resetFields();
        this.params.user_real_name = this.info.username;
        if (this.projectList.length == 1) {
          this.params.project_id = this.projectList[0]["value"];
          this.changePro(this.params.project_id);
        }
        if (this.channelList.length == 1) {
          this.params.channel_id = this.channelList[0]["value"];
          this.changeChannel(this.params.channel_id);
        }
      });
    },
    changeChannel(e) {
      this.channelList.forEach((item) => {
        if (item.value == e) {
          this.scedChannelList = item.children;
          if (this.scedChannelList.length == 1) {
            this.params.second_channel_id = this.scedChannelList[0]["value"];
          }
        }
      });
    },
    changePro(e) {
      this.params.department_card = this.departmentProject[e];
    },
    handleSave() {
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          fromYuyue(this.params)
            .then((res) => {
              this.getData();
              this.$Message.success("提交成功！");
              this.btnLoading = false;
            })
            .catch((res) => {
              this.btnLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  padding: 30px 0;
  background: #2b85e4;
  min-height: 100vh;
}
</style>
